<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>每日用户行为统计</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/chalk.js"></script>
  <script src="lib/jquery.min.js"></script>
</head>

<body>
  <div id="mCharts1" style=" height:500px"></div>

  <script>
    var mCharts1 = echarts.init(document.getElementById("mCharts1"))

    mCharts1.showLoading() // 在获取数据之前, 显示加载动画

    var option1 = {
  dataZoom: {
    type: "inside",
    xAxisIndex: 0,

  },

  color: ['#0000ff'],
  title: {
    text: '▎每日用户购买转化率统计',
    left: 20,
    top: 5
  },
  tooltip: {
    show: true,
    trigger: 'axis',
  },

  legend: {
    data:['购买转化率']
  },
  grid: {
    top: '20%',
    left: '3%',
    right: '6%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      name: '时间',
      type: 'category',
      boundaryGap: false,
      data: []
    }
  ],
  yAxis: {
        name: '%',
        type: 'value',
        scale: true,

        axisLabel: {
            show: true,
        interval: 'auto',
        formatter: '{value} %'//纵坐标百分比
        
        }
       },
  series: [
    {
      name: '购买转化率',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
       
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    }
  ]
};
    
    
    mCharts1.setOption(option1)

    mCharts1.on('click', function (arg) {
      console.log(arg)
      console.log('click...')
    }) // 对事件进行监听

    mCharts1.off('click') // 解绑click的事件

    mCharts1.on('legendselectchanged', function (arg) {
      console.log(arg)
      console.log('legendselectchanged')
    })
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // 调用echarts实例对象的resize方法
      mCharts1.resize()
    }
        //使用jQuery的Ajax请求，通过GET方法从"http://10.180.210.100:9898/data20"获取数据，并根据返回的数据更新图表配置。

    $.get("http://127.0.0.1:9898/data20",function(data,status){
      mCharts1.hideLoading() // 当服务器数据获取成功之后, 隐藏加载动画
      var xAxi = []
      var serie1 =[]

      for (let i=0; i<data.length;i++){
        // 格式化日期为 YYYY-MM-DD
        var dateStr = data[i].act_date
        if (dateStr && dateStr.length >= 10) {
          dateStr = dateStr.substring(0, 10)
        }
        xAxi.push(dateStr)
        serie1.push(data[i].buy_rate)
      }
      console.log(xAxi);
      mCharts1.setOption({
        xAxis:{data: xAxi},
        series:[{data: serie1}]
      });
    })
 
  </script>
</body>

</html>